<template>
  <div class="max-w-4xl mx-auto p-6 bg-white shadow-lg rounded-lg">
    <!-- Header -->
    <div class="flex items-center space-x-6 mb-6">
      <el-avatar
          :size="80"
          src="./src/assets/ai.jpg"
          class="user-avatar"
      />
      <div>
        <h1 class="text-3xl font-semibold text-gray-800">散绪漫</h1>
        <p class="text-gray-500">一个热爱编码和猫猫的开发者 🐱</p>
      </div>
    </div>

    <!-- Contact -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-3">联系方式</h2>
      <ul class="space-y-2 text-gray-700">
        <li class="flex items-center">
          <el-icon :size="18" class="mr-2"><Message /></el-icon>
          kayn@example.com
        </li>
        <li class="flex items-center">
          <el-icon :size="18" class="mr-2"><Link /></el-icon>
          github.com/kaynHub
        </li>
        <li class="flex items-center">
          <el-icon :size="18" class="mr-2"><ChatLineRound /></el-icon>
          @kaynDev
        </li>
      </ul>
    </div>

    <!-- Skills -->
    <div>
      <h2 class="text-xl font-semibold text-gray-800 mb-3">技能</h2>
      <div class="flex flex-wrap gap-3">
        <span class="px-4 py-2 bg-blue-100 text-blue-600 rounded-lg text-sm">Vue 3</span>
        <span class="px-4 py-2 bg-green-100 text-green-600 rounded-lg text-sm">Node.js</span>
        <span class="px-4 py-2 bg-purple-100 text-purple-600 rounded-lg text-sm">Tailwind CSS</span>
        <span class="px-4 py-2 bg-yellow-100 text-yellow-600 rounded-lg text-sm">TypeScript</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  Message,
  Link,
  ChatLineRound,
} from '@element-plus/icons-vue'
</script>

<style scoped>
.user-avatar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
